/*
 * Copyright © 2012 by PropSage Pte Ltd. 
 * All Rights Reserved.
 * licensing@propsage.com
 * http://www.propsage.com/terms.html
 * 
 * 
 * Javascript for /case/index
 * 
 * @author Poh Nean
 */
propsage.namespace("modules.admin.users");

modules.admin.users.geneology = (function($, ui){
    
	function initComponents()
	{
		var st = new $jit.ST({
			//id of viz container element
			injectInto: 'infovis',
			//set duration for the animation
			duration: 800,
			//set animation transition type
			transition: $jit.Trans.Quart.easeInOut,
			//set distance between node and its children
			levelDistance: 50,
			orientation: 'left',
			//enable panning
			Navigation: {
				enable:true,
				panning:true
			},
			//set node and edge styles
			//set overridable=true for styling individual
			//nodes or edges
			Node: {
				height: 44,
				width: 120,
				type: 'rectangle',
				color: '#aaa',
				overridable: true
			},
        
			Edge: {
				type: 'bezier',
				overridable: true
			},
        
			onBeforeCompute: function(node){
			},
        
			onAfterCompute: function(){
			},
        
			//This method is called on DOM label creation.
			//Use this method to add event handlers and styles to
			//your node.
			onCreateLabel: function(label, node){
				label.id = node.id;            
				label.innerHTML = node.name;
				label.onclick = function(){
					st.setRoot(node.id, 'animate');
				};
				//set label styles
				var style = label.style;
				style.width = 116 + 'px';
				style.height = 40 + 'px';            
				style.cursor = 'pointer';
				style.color = '#333';
				style.fontSize = '0.8em';
				style.textAlign= 'center';
				style.paddingTop = '3px';
			},
        
			//This method is called right before plotting
			//a node. It's useful for changing an individual node
			//style properties before plotting it.
			//The data properties prefixed with a dollar
			//sign will override the global node style properties.
			onBeforePlotNode: function(node){
				//add some color to the nodes in the path between the
				//root node and the selected node.
				if (node.selected) {
					node.data.$color = "#ff7";
				}
				else {
//					delete node.data.$color;
//					//if the node belongs to the last plotted level
//					if(!node.anySubnode("exist")) {
//						//count children number
//						var count = 0;
//						node.eachSubnode(function(n) {
//							count++;
//						});
//						//assign a node color based on
//						//how many children it has
//						node.data.$color = ['#aaa', '#baa', '#caa', '#daa', '#eaa', '#faa'][count];                    
//					}
				}
			},
        
			//This method is called right before plotting
			//an edge. It's useful for changing an individual edge
			//style properties before plotting it.
			//Edge data proprties prefixed with a dollar sign will
			//override the Edge global style properties.
			onBeforePlotLine: function(adj){
				if (adj.nodeFrom.selected && adj.nodeTo.selected) {
					adj.data.$color = "#eed";
					adj.data.$lineWidth = 3;
				}
				else {
					delete adj.data.$color;
					delete adj.data.$lineWidth;
				}
			}
		});
		
				
		//load json data
		st.loadJSON(geneology);
		//compute node positions and layout
		st.compute();
		
		//optional: make a translation of the tree  
		st.geom.translate(new $jit.Complex(-200, 0), "current");  
		//emulate a click on the root node.  
		st.onClick(st.root);  
	}
	
	function initEventHandlers()
	{
	}
	
	$(document).ready(function(){
		initComponents();
		initEventHandlers();
	});
    
}(jQuery, propsage.ui));
